<template>
  <a-drawer v-model:visible="visible" class="custom-class" style="color: red" title="挂载内容-位置" placement="right"
    width="636px">
    <!-- 位置列表 -->
    <div class="poiList">
      <!-- 添加位置 -->
      <div class="poi_add" @click="addPoiHandle">
        <plus-outlined style="font-size: 16px" />
      </div>
      <div class="poi_item" v-for="store in poi_list">
        <a-popover>
          <template #content>
            <span >
              {{ store?.store_name }}
            </span>
          </template>
          <span class="text">
            {{ store?.store_name }}
          </span>
        </a-popover>

        <!-- 小红书完整文字 -->
        <a-popover>
          <template #content>
            <span>
              {{ store?.store_address }}
            </span>
          </template>
          <span v-if="store?.full_address" class="full_address text">{{ store?.full_address }}</span>
        </a-popover>

        <delete-outlined class="del_btn" @click="deleteHandle(store)" />
      </div>
    </div>
    <template #footer>
      <div style="text-align: right">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="submitHandle">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  createVNode,
} from "vue";
import {
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import store from "../../../../store";
export default defineComponent({
  props: {
    poiList: {
      type: Array,
      default: [],
    },
  },
  components: {
    PlusOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    EllipsisOutlined
  },
  setup(props, context) {
    const state = reactive({
      visible: false,
      poi_list: [],
    });
    watch(
      () => props.poiList,
      (val) => {
        state.poi_list = JSON.parse(JSON.stringify(val));
      }
    );
    // 打开弹窗
    const showDrawer = () => {
      state.visible = true;
    };
    // 关闭弹窗
    const onClose = () => {
      state.visible = false;
    };
    // 添加
    const addPoiHandle = () => {
      context.emit("addPoiList");
    };
    const deleteHandle = (info) => {
      Modal.confirm({
        title: "删除挂载位置",
        icon: createVNode(ExclamationCircleOutlined),
        content: "确定删除该挂载位置吗？",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          const index = state.poi_list.findIndex((ele) => ele.id === info.id);
          if (index != -1) {
            state.poi_list.splice(index, 1);
          }
          context.emit("success", state.poi_list)
          message.success("删除成功");
        },
        onCancel() {},
      });
    };
    // 提交
    const submitHandle = () => {
      context.emit("success", state.poi_list);
      state.visible = false;
    };

    // 添加标题
    return {
      ...toRefs(state),
      showDrawer,
      onClose,
      submitHandle,
      addPoiHandle,
      deleteHandle,
    };
  },
});
</script>

<style lang="less" scoped>
.poiList {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
  color: black;
  .poi_add,
  .poi_item {
    width: calc(30%); /* 子元素宽度设置为25%（减去gap的一半） */
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
  }
  .poi_add {
    align-items: center;
    justify-content: center;
  }
  .poi_item {
    justify-content: center;
    position: relative;
    padding: 5px 5px 5px 10px;
    flex-direction: column;
    gap: 10px;

    .text{
      overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: auto;
    }
    // 小红书
                    .full_address {
                      color: #666;
                      font-size: 13px;
                    }
    .store_address {
      font-size: 14px;

    }
    .del_btn {
      position: absolute;
      font-size: 14px;
      top: 2px;
      right: 2px;
      &:hover {
        color: var(--ss-primary-color);
      }
    }
  }
}
// .active {
//   border: 1px solid #2878ff !important;
// }
</style>